<template>
	<!--新增、编辑页面-->
	<view class="page-content">
		<view class="page-body">
			<view class="input-row">
				<view class="input-row-t">收货人</view>
				<input class="input-row-w" type="text" v-model="params.nickname" placeholder=""
					 placeholder-style="color:#ddd"></input>
			</view>
			<view class="input-row">
				<view class="input-row-t">手机号码</view>
				<input class="input-row-w" type="text" v-model="params.mobile" placeholder=""
					 placeholder-style="color:#ddd"></input>
			</view>

			<view class="del-row">
				<text class="del-row-t">店铺(收货地址)</text>
				<textarea class="del-input" v-model="params.site" @blur="bindTextAreaBlur" placeholder="请详细填写您的所在地区" />
			</view>
			
			<view class="default-row">
				<switch color="#198FFF" @change="switchChange" :checked="params.order"  style="transform:scale(0.7)"/>
				<text class="default-row-t">设为默认地址</text>
			</view>
		</view>
		<view class="page-foot" @click="confirm">
			<text class="submit">保存</text>
		</view>
	
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		addAddresss,editAddresss
	} from '@/common/api.js';
	//import epTitBack from "@/components/ep-tit-fav/ep-tit-back.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {
			//epTitBack,
			uniIcons
		},
		data() {
			return {
				params:{
					id:0,
					nickname:'',
					mobile:'',
					site:'',
					order:false
				},
				pageType:'add', //页面类型 add-增加 edit-编辑

				addressData: {

				},
				formName: '',
			}
		},
		onLoad(option){
			console.log(222,option)
			if(option.pageType){
				this.pageType = option.pageType
			}
			if(option.nickname){
				this.params.id = option.id;
				this.params.nickname = option.nickname;
				this.params.mobile = option.mobile;
				this.params.site = option.site;
				if(option.order === '0'){
					this.params.order = false;
				}else if(option.order === '1'){
					this.params.order = true;
				}
			}
		},
		methods: {
			switchChange(e){
				console.log(111,e)
				if(e.detail.value){
					this.params.order = '1'
				}else{
					this.params.order = '0'
				}
			},
			bindTextAreaBlur: function (e) {
			     console.log(e.detail.value)
			},
			//提交
			confirm(e){
				let resdata = this.params;
				console.log(44,this.params)
				if (resdata.nickname === "") {
					uni.showToast({
						title: "收货人不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (resdata.mobile === "") {
					uni.showToast({
						title: "手机号码不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (resdata.site === "") {
					uni.showToast({
						title: "收货地址不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(this.pageType === 'add'){
					addAddresss(resdata).then(res=>{
						if(res.code===2000){
							uni.navigateBack({
								delta:1
							})
							setTimeout(() => {
							    uni.showToast({
							    	title:'添加成功！',
							    	icon:'none',
							    	duration:2000
							    })
							}, 100)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					})
				}else if(this.pageType === 'edit'){
					editAddresss(resdata).then(res=>{
						if(res.code===2000){
							uni.navigateBack({
								delta:1
							})
							setTimeout(() => {
							    uni.showToast({
							    	title:'编辑成功！',
							    	icon:'none',
							    	duration:2000
							    })
							}, 100)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					})
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-content{
		width:100vw;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: $uni-bg-color;
		.page-foot{
			margin: 30rpx 30rpx 0 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: $uni-but-bg-color;
			border-radius: 10rpx;
			font-size: 36rpx;
			font-weight: 400;
			text-align: center;
			color: $font-color-w;
		}
		.page-body{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			
			.default-row{
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				.default-row-t{
					font-size: 16px;
					font-weight: 400;
					color: $font-color-3;
				}
			}
			.del-row{
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				.del-row-t{
					display: flex;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 32rpx;
					color: $font-color-3;
				}
				.del-input{
					width: calc(100% - 40rpx);
					padding: 20rpx 20rpx;
					height: 300rpx;
					font-size: 28rpx;
					line-height: 50rpx;
					border-radius: 20rpx;
					color: $font-color-3;
					background: $uni-bg-color-grey;
				}
				
			}
			
			.input-row {
				height: 100rpx;
				display: flex;
				align-items: center;
				width: 100%;
				flex-direction: row;
				border-bottom: 1rpx solid #f5f5f5;
				background: $uni-bg-box-color;
				.row-sel-box{
					width: 100%;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.sel_name{
						font-size: 32rpx;
						font-weight: 400;
					}
					.icons{
						color: $font-color-9;
					}
				}
						
				.input-row-w {
					display: flex;
					flex: 1;
					width: 100%;
					padding-left: 30rpx;
					height: 80rpx;
					color: $font-color-3;
					font-size: 28rpx;
					border: 1rpx solid #fff;
				}
				.input-row-t{
					font-size: 32rpx;
					color: $font-color-3;
				}
			}
		}
	}
</style>
